iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

<法式Terrine : React next.js Chakra-UI styled-component 精緻的搭配>系列 第 18

< 關於 React: 開始打地基| 圖片的使用方式 >

  • 分享至 

  • xImage
  •  

React 圖片顯示

?引入圖片(svg)-背景圖片

只需要将图片放到 public目录下 然后以此路径为起点设置路径就可以了

使用component style

const Container = styled.div`
  background: url("wave.svg");
`;

直接使用Public資料夾中的圖片檔案(SVG可以)
來源:https://blog.csdn.net/printf_hello/article/details/118887651

其他方法:
https://medium.com/itsoktomakemistakes/react-create-react-app-svg-icons-styled-component-570b4e9f07b

?引入圖片(svg)

  1. 引入 next.js 內建的
    <Image> 放在最上面
import Image from "next/image";

''
2. 將要放入的圖片寫成引入的自定義名稱

import Iconinfo from "../public/Icon/Icon-info.svg";
  1. 引入<Image>標籤,src需用{}包起來自定義名稱,alt標籤一定要寫,完成如下
<Image src={Iconinfo} alt="Picture of the author" />

上一篇
< 關於 Next: 開始打地基| CSS的引入方式 >
系列文
<法式Terrine : React next.js Chakra-UI styled-component 精緻的搭配>18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言